<template>
  <div class="cleanup-tasks-container">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" inline>
        <el-form-item label="设备编号">
          <el-input
            v-model="searchForm.deviceCode"
            placeholder="请输入设备编号"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="区域">
          <el-input
            v-model="searchForm.area"
            placeholder="请输入区域"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="清运员姓名">
          <el-input
            v-model="searchForm.cleanupStaffName"
            placeholder="请输入清运员姓名"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="清运员电话">
          <el-input
            v-model="searchForm.cleanupStaffPhone"
            placeholder="请输入清运员电话"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="回收类型">
          <el-select
            v-model="searchForm.wasteType"
            placeholder="请选择回收类型"
            clearable
            style="width: 200px"
          >
            <el-option label="纸壳类" value="paper" />
            <el-option label="织物类" value="textile" />
            <el-option label="混合类" value="mixed" />
          </el-select>
        </el-form-item>

        <el-form-item label="满溢状态">
          <el-select
            v-model="searchForm.overflowStatus"
            placeholder="请选择满溢状态"
            clearable
            style="width: 200px"
          >
            <el-option label="满溢" value="full" />
            <el-option label="接近满溢" value="near_full" />
            <el-option label="正常" value="normal" />
          </el-select>
        </el-form-item>

        <el-form-item label="清运状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择清运状态"
            clearable
            style="width: 200px"
          >
            <el-option label="待清运" value="pending" />
            <el-option label="已清运" value="completed" />
          </el-select>
        </el-form-item>



        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作区域 -->
    <el-card class="operation-card" shadow="never">
      <div class="operation-buttons">
        <el-button type="primary" @click="handleExport" :loading="exporting">
          <el-icon><Download /></el-icon>
          批量导出
        </el-button>
        <el-button @click="loadCleanupTasks">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card" shadow="never">
      <el-table
        :data="cleanupList"
        v-loading="loading"
        style="width: 100%"
        stripe
      >
        <el-table-column type="selection" width="55" />

        <el-table-column prop="taskCode" label="任务编号" min-width="160" />

        <el-table-column prop="deviceCode" label="设备编号" min-width="120" />

        <el-table-column prop="deviceLocation" label="设备位置" min-width="200" show-overflow-tooltip />

        <el-table-column prop="area" label="区域" min-width="100" />

        <el-table-column prop="wasteType" label="回收类型" min-width="100">
          <template #default="{ row }">
            {{ getWasteTypeText(row.wasteType) }}
          </template>
        </el-table-column>

        <el-table-column prop="overflowStatus" label="满溢状态" min-width="100">
          <template #default="{ row }">
            <el-tag :type="getOverflowStatusTag(row.overflowStatus)">
              {{ getOverflowStatusText(row.overflowStatus) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="currentWeight" label="当前重量" min-width="100">
          <template #default="{ row }">
            {{ row.currentWeight }} kg
          </template>
        </el-table-column>

        <el-table-column prop="maxCapacity" label="最大容量" min-width="100">
          <template #default="{ row }">
            {{ row.maxCapacity }} kg
          </template>
        </el-table-column>

        <el-table-column prop="cleanupStaffName" label="清运员" min-width="100" />

        <el-table-column prop="cleanupStaffPhone" label="清运员电话" min-width="120" />



        <el-table-column prop="status" label="清运状态" min-width="100">
          <template #default="{ row }">
            <el-tag :type="getTaskStatusTag(row.status)">
              {{ getTaskStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{ row }">
            <el-button
              v-if="row.status === 'pending'"
              type="primary"
              size="small"
              @click="handleCompleteTask(row)"
            >
              完成清运
            </el-button>
            <el-button
              type="info"
              size="small"
              @click="handleViewDetail(row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Search, Refresh, Download } from '@element-plus/icons-vue'
import { useCleanupTasks } from './CleanupTasks.script'

const {
  loading,
  exporting,
  searchForm,
  pagination,
  cleanupStats,
  cleanupList,
  cleanupStaffList,
  getOverflowStatusTag,
  getOverflowStatusText,
  getTaskStatusTag,
  getTaskStatusText,
  getWasteTypeText,
  loadCleanupTasks,
  handleSearch,
  handleReset,
  handlePageChange,
  handleSizeChange,
  handleExport,
  handleAssignTask,
  handleCompleteTask,
  handleCancelTask,
  handleViewDetail
} = useCleanupTasks()
</script>

<style scoped>
.cleanup-tasks-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 16px;
}

.operation-card {
  margin-bottom: 16px;
}

.operation-buttons {
  display: flex;
  gap: 12px;
}

.table-card {
  margin-bottom: 16px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
